<template>
  <div class="mybox">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-input v-model="keyword" placeholder="名称" @keyup.native.enter="initPage" style="width: 20em;margin-right: 15px" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="default" @click="initPage">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="visibleFlag = true" v-if="hasAuth('sys:role:add')">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-popconfirm title="是否确认删除选中的数据" @confirm="delSelect">
          <el-button type="danger" slot="reference" :disabled="selectFlag">批量删除</el-button>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <el-table stripe border @select="selectCheck" @select-all="selectAll" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="roleName" label="名称"></el-table-column>
      <el-table-column prop="roleCode" label="唯一编码"></el-table-column>
      <el-table-column prop="roleDesc" label="描述"></el-table-column>
      <el-table-column label="状态" prop="roleStatus">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.roleStatus == 1">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="preAuth(scope.row.roleId)">分配权限</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="是否确认删除当前数据" @confirm="del(scope.row.roleId)">
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: flex-end;height: 47px;align-items: center">
      <el-pagination layout="total,sizes,prev,pager,next,jumper" background :current-page="page" :page-size="pageSize"
        :page-sizes="[10,20,30,40]" :total="total" @current-change="currentChange" @size-change="sizeChange" />
    </div>
    <el-dialog :visible.sync="visibleFlag" @close="close" width="40%" title="角色信息">
      <div>
        <el-form :model="roles" label-width="80px" :rules="rules" ref="form">
          <el-form-item prop="roleName" label="角色名称">
            <el-input placeholder="请输入角色名称" v-model="roles.roleName"></el-input>
          </el-form-item>
          <el-form-item prop="roleCode" label="唯一编码">
            <el-input placeholder="请输入唯一编码" v-model="roles.roleCode"></el-input>
          </el-form-item>
          <el-form-item prop="roleDesc" label="描述">
            <el-input placeholder="请输入描述" v-model="roles.roleDesc"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="roleStatus">
            <el-radio v-model="roles.roleStatus" :label="0">禁用</el-radio>
            <el-radio v-model="roles.roleStatus" :label="1">正常</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" style="display: flex;justify-content: flex-end">
        <el-button type="default" style="width: 90px" @click="visibleFlag=false">取消</el-button>
        <el-button type="primary" style="width: 90px" @click="submit">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="authFlag" width="35%" title="分配权限">
      <div>
        <el-tree :default-expand-all="true" ref="tree" show-checkbox :props="defaultProps" :data="menuData" node-key="menuId"
          empty-text="当前暂无权限" check-strictly>
        </el-tree>
      </div>
      <div slot="footer" style="display: flex;justify-content: flex-end">
        <el-button type="default" style="width: 90px" @click="authFlag=false">取消</el-button>
        <el-button type="primary" style="width: 90px" @click="submitTree">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Role",
    data() {
      return {
        keyword: "",
        selectFlag: true,
        visibleFlag: false,
        roles: {
          roleName: "",
          roleCode: "",
          roleDesc: "",
          roleStatus: 1
        },
        rules: {
          roleName: [{
            required: true,
            message: "请输入角色名",
            trigger: "blur"
          }],
          roleCode: [{
            required: true,
            message: "请输入唯一编码",
            trigger: "blur"
          }],
          roleDesc: [{
            required: true,
            message: "请输入描述",
            trigger: "blur"
          }],
          roleStatus: [{
            required: true,
            message: "请选择状态",
            trigger: "blur"
          }]
        },
        pageSize: 10,
        page: 1,
        total: 0,
        tableData: [],
        preSelect: [],
        authFlag: false,
        menuData: [],
        defaultProps: {
          children: 'children',
          label: "menuName"
        },
        setRoleId: 0
      }
    },
    methods: {
      getMenu() {
        this.$get("/api/menu/list").then(res => {
          if (res.code == 200) this.menuData = res.data
        })
      },
      preAuth(id) {
        this.authFlag = true
        this.$get("/api/role/info/" + id).then(res => {
          if (res.code == 200) {
            this.setRoleId = id
            this.$refs['tree'].setCheckedKeys(res.menuIds)
          }
        })
      },
      submitTree() {
        let ids = this.$refs['tree'].getCheckedKeys()
        this.$post("/api/role/commit/auth/" + this.setRoleId, ids.toString()).then(res => {
          if (res.code == 200) {
            this.authFlag = false
            this.$message.success("权限分配成功")
          }
        })
      },
      initPage() {
        console.log(this.page)
        let data = {
          limit: this.pageSize,
          page: this.page,
          name: this.keyword
        }
        console.log(data)
        this.$get("/api/role/list", data).then(res => {
          if (res.code == 200) {
            let obj = res.data
            this.pageSize = obj.size
            this.total = obj.total
            this.page = obj.current
            this.tableData = obj.records
          }
        })
      },
      edit(data) {
        this.roles = JSON.parse(JSON.stringify(data))
        console.log(this.roles)
        this.visibleFlag = true
      },
      delSelect() {
        let arr = []
        this.preSelect.map(item => {
          arr.push(item.roleId)
        })
        this.del(arr)
      },
      del(data) {
        let ids = Array.isArray(data) ? data.toString() : data
        this.$post("/api/role/delete/" + ids).then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功")
            this.initPage()
          }
        })
      },
      selectAll(selection) {
        this.preSelect = selection
        this.selectFlag = selection.length > 0 ? false : true
      },
      selectCheck(selection, row) {
        this.preSelect = selection
        this.selectFlag = selection.length >= 2 ? false : true
      },
      currentChange(page) {
        this.page = page
        this.initPage()
      },
      sizeChange(size) {
        this.pageSize = size
        this.initPage()
      },
      submit() {
        this.$refs["form"].validate(flag => {
          if (flag) {
            this.$post("/api/role/save", this.roles).then(res => {
              if (res.code == 200) {
                this.$message.success(this.roles.roleId ? "更新成功" : "添加成功")
                this.initPage()
                this.close()
              }
            })
          }
        })
      },
      close() {
        this.visibleFlag = false
        this.roles = {
          roleName: "",
          roleCode: "",
          roleDesc: "",
          roleStatus: 0
        }
      }
    },
    created() {
      this.initPage()
      this.getMenu()
    }
  }
</script>

<style scoped>
  .mybox>>>.el-table__header,
  .mybox>>>.el-table__body {
    margin: 0;
  }
</style>
